<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-21 10:05:19
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-25 10:07:53
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\TemplateDetail\components\navBack
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
// vue 相关
import { ref } from 'vue'
// 图标
    import {
    LeftOutlined,
    VideoCameraFilled
} from '@ant-design/icons-vue';
// 路由
import { useRouter } from 'vue-router'
const router = useRouter()

const emit = defineEmits(['backClick'])
// 接收参数
const props = defineProps({
    leftConfig:{
        type:Object,
        default:() =>{
            return{
                title:'',
                isShow:false
            }

        }
    },
    contentConfig:{
        type:Object,
        default:() =>{
            return{
                title:'',
                isShow:false
            }

        }
    },
    rightConfig:{
        type:Object,
        default:() =>{
            return{
                title:'',
                isShow:false,
                    /**
                     * 是否显示省略号
                     * true为显示
                     */
                isShowEllipsis:false
            }

        }
    }
})

    // 气泡选择是否显示
    const popVisible = ref(false)

    // 头部右侧选择参数
    const setSelections = (name ,val)=>{
        console.log(name,val);
    }

// 右侧标签页展示内容控制
const activeKey = ref('1')
</script>

<template>
    <div class="navBack">
        <!-- 左侧返回按钮的配置项 -->
            <div class="nav_back_left" v-if="props.leftConfig.isShow">
                <LeftOutlined  style="font-weight: 900;" @click="emit('backClick')"/>
                <slot name="left_text">
                    <span class="nav_back_left_text"> {{props.leftConfig?.title}} </span>
                </slot>
            </div>

        <!-- 中间标题 -->
        <div class="nav_back_center" v-if="props.contentConfig.isShow">
            <slot name="content_text">
                <h1 class="nav_back_center_text">{{ props.contentConfig?.title || 651654 }}</h1>
            </slot>
        </div>

        <!-- 右侧控制面板 -->
        <div class="nav_back_right" v-if="props.rightConfig.isShow">
            <slot name="right_btns">
                <a-button type="primary" style="border-radius: 6px;" @click="router.push('/templateEditor')">
                    <VideoCameraFilled />
                    使用模板
                </a-button>
            </slot>
            <a-popover 
            v-model:visible="popVisible"  
            placement="bottomLeft" trigger="click" 
            :getPopupContainer=" triggerNode => {
                        return triggerNode.closest('.nav_back_right')
                    }">
                      <template #content>
                        <slot name="controls">
                            <div class="item_select" 
                                @click="setSelections('subSelect',123)">{{ '查看参数' }}
                            </div>
                        </slot>
                    </template>
                    <!-- 是否显示省略号 -->
            <div class="showPop" v-if="props.rightConfig.isShowEllipsis">
                <cu-icon class="icon" type="icon-more"/>
            </div>
            </a-popover>
        </div>
    </div>
</template>

<style lang="less" scoped>

    .navBack{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        padding: 0 30px;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        // 中间标题
        .nav_back_center{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            .nav_back_center_text{
                text-align: center;
                font-size: 16px;
                font-weight: 600;
                margin: 0;
            }
        }
        .nav_back_right{
            display: flex;
            gap: 10px;
            align-items: center;

            // 去除外层padding
            :deep(.ant-popover-inner-content){
            padding: 0 !important;
            }
            // 内容容器圆角边框
            :deep(.ant-popover-inner){
                border-radius: 6px !important;
                overflow: hidden;
            }
            // 去除小尖尖
            :deep(.ant-popover-arrow-content){
                display: none;
            }
            // 整体位置
            :deep(.ant-popover-placement-bottomRight){
                top: 43px !important;
            }

            .showPop {
                cursor: pointer;
                padding: 5px 10px;
                background-color: #f4f5f5;
                text-align: center;
                &:hover{
                    background-color: #eceded;
                }
            }


        }
        .nav_back_left{
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        .nav_back_left_text{
            margin-left: 10px;
        }
        }
    }


</style>